<html>
   <head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
       <style type="text/css">
		html{
			height: 100%;
		}

		body{
			display: flex;
			flex-direction: column;
			height: 100%;
			
			background:#fafeff;
			
			font-weight:lighter;
			
			font-family:Microsoft JhengHei;
			margin:0;
		}
        header{
			height: auto;
			width:100%;
			margin-left: 0;
			background:rgb(230, 230, 237);
			position: fixed; 
			top: 0;
			left:0;
			margin-bottom: 5px;
			z-index:999;
			font-family:Microsoft JhengHei;
			flex: 0 0 auto;
		}
		header ul{
			width: 100%;
			list-style-type: none;
			white-space:nowrap;
			margin-left:5%;
			padding: 0;

		}
		
		.ContPara1{
			font-size:16;
		}
		.button1,.button2{
			width:100%;
			margin:7 0;
			height:40px;
			text-align:left;
			
			font-family:Microsoft JhengHei;
		}
		.mainc{
			white-space:normal;
			word-break:break-all;
			word-wrap:break-word;			
			margin:0 auto;
			top:120;
			left:20;
			right:20;
			flex: 1 0 auto;
			font-family:'Microsoft YaHei';
		}
		@media  screen and (max-width:639px) {
			.mainc{
			width:90%;
			
			}
		}
		@media  screen and (min-width:640px) {
		.mainc{
			width:600px;
			
			}
		}
		footer{
			/*position:absolute;
			bottom:0px;*/
			height:60px;
			width:100%;
			flex: 0 0 auto;
		}
       </style>
    </head>
	<body>
	<div class="container">
		<header>
			<div style="display:inline-block;width=auto">
				<ul style="margin-left:50;">  
					<li style="font-size:25;font-weight:bold;width=auto;color:#705070">重面春太涩谷奇遇</li>
					<li>[22:33]这里是懒得想的地点</li>
				</ul>
			</div>
			<div class="tech" style="display:inline-block;margin-left:50;margin-bottom:5px">这里以后显示术式层数但是现在懒得做</div>
		</header>
		<div class="mainc">
			<div style="margin-bottom:50px">
				<!--我很悲伤。我必须用这个来伪装正常。-->
				<ul style="margin-left:50">  
					<li style="font-size:25;font-weight:bold;width=auto;color:#705070">重面春太涩谷奇遇</li>
					<li>[22:33]这里是懒得想的地点</li>
				</ul>
			</div>
			<div class="SceneImg">
				<img src="img.jpg" style="width:100%"/>
				<p style="margin-left:5px;color:#AAAAAA">这里是随便找了一张的图片。以后会换成正常的漫画截图。</p>
				<hr>
			</div>
			<div class="ContPara1">
			<p>这里应该是正文。我想不出要写什么，但是应该需要写很多东西来测试页面布局。所以我写了很多没有意义的东西。抱歉。</p>
			<p>这里应该是正文。我想不出要写什么，但是应该需要写很多东西来测试页面布局。所以我写了很多没有意义的东西。抱歉。</p>
			<p>这里应该是正文。我想不出要写什么，但是应该需要写很多东西来测试页面布局。所以我写了很多没有意义的东西。抱歉。</p>
			<p>这里应该是正文。我想不出要写什么，但是应该需要写很多东西来测试页面布局。所以我写了很多没有意义的东西。抱歉。</p>
			<p>这里应该是正文。我想不出要写什么，但是应该需要写很多东西来测试页面布局。所以我写了很多没有意义的东西。抱歉。</p>
			<p>这里应该是正文。我想不出要写什么，但是应该需要写很多东西来测试页面布局。所以我写了很多没有意义的东西。抱歉。</p>
			<p>这里应该是正文。我想不出要写什么，但是应该需要写很多东西来测试页面布局。所以我写了很多没有意义的东西。抱歉。</p>
			<p>这里应该是正文。我想不出要写什么，但是应该需要写很多东西来测试页面布局。所以我写了很多没有意义的东西。抱歉。</p>
			<p>这里应该是正文。我想不出要写什么，但是应该需要写很多东西来测试页面布局。所以我写了很多没有意义的东西。抱歉。</p>
			<p>这里应该是正文。我想不出要写什么，但是应该需要写很多东西来测试页面布局。所以我写了很多没有意义的东西。抱歉。</p>
			<p>这里应该是正文。我想不出要写什么，但是应该需要写很多东西来测试页面布局。所以我写了很多没有意义的东西。抱歉。</p>
			<p>这里应该是正文。我想不出要写什么，但是应该需要写很多东西来测试页面布局。所以我写了很多没有意义的东西。抱歉。</p>
			<p>这里应该是正文。我想不出要写什么，但是应该需要写很多东西来测试页面布局。所以我写了很多没有意义的东西。抱歉。</p>
			<p>假如你是重面春太，里梅对你说：“请你去猎杀那些穿西装的人。”</p>
			</div>
			<div class="options">
				<hr>
				<button class="button1"> 离开 </button>
				<button class="button2"> 继续 </button>
				<div id="dv"></div>
				<hr>
			</div>
		</div>
		<footer style="text-align:center;padding-top:200px;margin-bottom:30px">
			<hr>
			<p>重面春太的奇妙冒险project (2021)&nbsp;&nbsp;&nbsp;&nbsp;<br>设计剧情or单纯吐槽：QQ群951698005</p>
		</footer>
	</div>
	</body>
	<script>
		const button1 = document.querySelector('.button1');
		const button2 = document.querySelector('.button2');
		let k = 0;
		let rdmLuck = 0;
		let luckWord;
		var pObj;
		function getLuck()
		{
			rdmLuck = Math.floor( Math.random()*10+1);
			if(rdmLuck === 1) luckWord = "（大失败…）";
			if(rdmLuck >= 2 && rdmLuck <= 4) luckWord = "（失败）";
			if(rdmLuck >= 5 && rdmLuck <= 9) luckWord = "（成功）";
			if(rdmLuck === 10) luckWord = "（大成功！）";
		}
		button1.onclick=function(){
			k = 1;
			button1.remove();
			button2.remove();
			getLuck();
			pObj = document.createElement("p");
			pObj.innerText += "离开";
			document.getElementById("dv").appendChild(pObj);
			pObj = document.createElement("p");
			pObj.style= "color:#777777";
			pObj.innerText += "本次运气：" + rdmLuck + luckWord;
			document.getElementById("dv").appendChild(pObj);
			pObj = document.createElement("p");
			if(rdmLuck === 1) pObj.innerText = "总之是大失败，这里应该消耗一层术式但是还没做那个";
			if(rdmLuck >= 2 && rdmLuck <= 4) pObj.innerText = "总之是普通的失败";
			if(rdmLuck >= 5 && rdmLuck <= 9) pObj.innerText = "总之是普通的成功";
			if(rdmLuck === 10) pObj.innerText = "总之是大成功，这里应该充能一层术式但是还没做那个";
			document.getElementById("dv").appendChild(pObj);
			pObj = document.createElement("p");
			pObj.innerText="然后是接下来的一堆正文但是我懒得写了所以就这样吧嗯总之只是一个样式展示";
			document.getElementById("dv").appendChild(pObj);
		}
		button2.onclick=function(){
			k = 1;
			button1.remove();
			button2.remove();
			getLuck();
			pObj = document.createElement("p");
			pObj.innerText += "继续";
			document.getElementById("dv").appendChild(pObj);
			pObj = document.createElement("p");
			pObj.style= "color:#777777";
			pObj.innerText += "本次运气：" + rdmLuck + luckWord;
			document.getElementById("dv").appendChild(pObj);
			pObj = document.createElement("p");
			if(rdmLuck === 1) pObj.innerText = "总之是大失败，这里应该消耗一层术式但是还没做那个";
			if(rdmLuck >= 2 && rdmLuck <= 4) pObj.innerText = "总之是普通的失败";
			if(rdmLuck >= 5 && rdmLuck <= 9) pObj.innerText = "总之是普通的成功";
			if(rdmLuck === 10) pObj.innerText = "总之是大成功，这里应该充能一层术式但是还没做那个";
			document.getElementById("dv").appendChild(pObj);
			pObj = document.createElement("p");
			pObj.innerText="然后是接下来的一堆正文但是我懒得写了所以就这样吧嗯总之只是一个样式展示";
			document.getElementById("dv").appendChild(pObj);
		}
	</script>
</html>